<template>
  <div class="library">
    <filtercard @getSearchList="getSearchList" :currentPage="currentPage" />
    <div v-if="dataList.length > 0" class="content" v-loading="listLoading">
      <el-row :gutter="20">
        <el-col :span="12" v-for="(item, index) in dataList" :key="index">
          <card :dataList="item" :cardWidth="590" :intro="true" />
        </el-col>
      </el-row>
    </div>
    <div v-else class="content">
      <h1>咦!没有找到你想要的哦!</h1>
      <h2>不如换个条件再试试~</h2>
      <el-image fit="contain" src="https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646"></el-image>
    </div>
    <div class="page">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        hide-on-single-page
        layout="prev, pager, next, jumper"
        :total="listTotal"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import card from "@/components/Card";
import filtercard from "@/components/FilterCard";
export default {
  name: "library",
  components: {
    card,
    filtercard
  },
  data() {
    return {
      dataList: [{}],
      currentPage: 1,
      listTotal: 1,
      pageSize: 10,
      listLoading: false,
      libOption:''
    };
  },
  created(){
  },
  methods: {
    handleCurrentChange() {
      window.scrollTo({top:0});
    },
    getSearchList(res) {
      this.listLoading = true;
      this.dataList = res.data;
      this.listTotal = res.total;
      this.pageSize = res.per_page;
      this.listLoading = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.library {
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 112px;
  .content {
  }
  .page {
    margin-top: 24px;
  }
}

.library .el-row .el-col:nth-child(5) .card {
  margin-bottom: 20px;
}

.library .el-row .el-col:nth-child(6) .card {
  margin-bottom: 20px;
}
</style>